<template>
    <div>
        <el-input class="w-500" clearable v-model="str1"></el-input>
        <div class="m-t-10"></div>
        <el-button type="primary" @click="getJson1">生成搜索配置数据</el-button>
        <el-button type="primary" @click="getJson2">生成table配置数据</el-button>
        <pre contenteditable class="pre-class m-t-20">
            {{ json1 }}
        </pre>

        <h2 class="m-t-100">dialogForm</h2>
        <el-button type="primary" @click="visable = true">open-dialogForm</el-button>

        <h2>async—e-dialog</h2>
        <el-button @click="isShow = true">open-dialog</el-button>
        <h2>kl-loading</h2>
        <el-button @click="openLoading">打开</el-button>
        <h2>pixi.js</h2>
        <div ref="pageRef"></div>
        {{ number }}
        --
        <my v-model="number"></my>
        <edit v-if="isShow" @closed="closed"></edit>

        <DiaologForm
            v-model="visable"
            v-if="visable"
            :formConfig="formConfig"
            :rules="rules"
            :formData="formData"
            :beforeSubmit="beforeSubmit"
            text="确认提交吗"
        >
        </DiaologForm>
    </div>
</template>

<script>
import { baseURL } from '@/plugins/config'
import my from './my.vue'
export default {
    components: {
        my,
        edit: () => import('./edit.vue'),
    },
    data() {
        return {
            str1: '扣款编号、PSID、扣款审批状态、扣款审批状态、扣款函编号、通知函编号、扣款对象名称、一级目录、二级目录、扣款项目、关联单据、关联单据变更原因、扣款金额、扣款状态、DMS扣款流程编号、DM扣款反馈、省、市、区、申请人、申请时间、更新时间、特殊费用编号、实时对账单号、实时结算金额、实时结算支付状态、月度对账单号、月度结算金额、月度结算支付状态、运维扣款金额、运维扣款原因、费用异常原因',
            json1:{},
            visable: false,
            app: {},
            number: false,
            isShow: false,
            rules: {
                component_code: [
                    { required: true, message: '请输入component_code', trigger: 'blur' },
                ],
                component_name: [
                    { required: true, message: '请选择component_name', trigger: 'change' },
                ],
                component_html: [
                    { required: true, message: '请输入component_html', trigger: 'change' },
                ],
                component_str: [
                    { required: true, message: '请输入component_str', trigger: 'change' },
                ],
            },
            formConfig: [
                {
                    label: '组件code',
                    type: 'input',
                    modelName: 'component_code',
                    className: 'w-220',
                    value: '',
                },
                {
                    label: '组件名字',
                    type: 'input',
                    modelName: 'component_name',
                    className: 'w-220',
                    value: '',
                },
                {
                    label: '组件信息',
                    type: 'customAll',
                    slot: 'component_html',
                },
            ],
            formData: {
                _id: '',
                component_code: '1',
                component_name: '2',
                component_html: '',
                component_str: '',
            },
        }
    },
    mounted() {
        this.getIndexDBJS([
            {
                js: 'http://47.108.195.190:5000/netdist/piximin-1716457844444~1~.js',
            },
            {
                js: 'http://47.108.195.190:5000/netdist/vue-request-v1.js',
            },
        ])
            .then(() => {
                // 测试use-request
                VueRequest.useRequest(axios.get('http://127.0.0.1:5000/ceshi'), {
                    pollingInterval: 1000,
                    pollingWhenHidden: true,
                })

                this.init()
            })
            .catch((err) => {
                console.log('err', err)
            })
    },
    methods: {
        getJson1() {
            this.json1 = this.str1.split('、').map((item) => {
                const obj = {
                    是否: 'select',
                    状态: 'select',
                    省: 'aaa',
                    市: 'aaa',
                    区: 'aaa',
                    时间: 'time',
                }

                const select = {
                    label: '审批状态',
                    type: 'select',
                    mode: 'multiple',
                    modelName: 'auditStatus',
                    options: [],
                    labelKey: 'name',
                    valueKey: 'code',
                }

                const aaa = {
                    label: '省份&城市',
                    modelName: ['provinceNo', 'cityNo', 'areaNo'],
                    type: 'cascader',
                    fieldNames: {
                        label: 'name',
                        value: 'code',
                    },
                    options: [],
                    optionsSource: 'getAllAreaListApi', // 从远端获取数据
                    changeOnSelect: true, //点选每级菜单选项值都会发生变化
                }

                const time = {
                    label: '房屋修缮时间',
                    type: 'datetimerange',
                    modelName: ['householdRepairStartTime', 'householdRepairEndTime'],
                    format: 'YYYY-MM-DD',
                }

                const base = {
                    label: item,
                    type: 'input',
                    modelName: 'psId',
                }

                let type = 'input'
                for (const key in obj) {
                    if (item.includes(key)) {
                        type = obj[key]
                        break
                    }
                }

                let result = {}
                if (type === 'select') {
                    result = this.deepCopy(select)
                    result.label = item
                    return result
                }

                if (type === 'aaa') {
                    result = this.deepCopy(aaa)
                    return result
                }

                if (type === 'time') {
                    result = this.deepCopy(time)
                    result.label = item
                    return result
                }
                return base
            })

            // label: '省份&城市', 只能有一个
            let ishave = false
            this.json1 = this.json1.filter((item) => {
                if (item.label == '省份&城市') {
                    if (ishave) {
                        return false
                    }
                    ishave = true
                }
                return true
            })
        },

        getJson2() {
            const arr = this.str1.split('、')
            this.json1 = arr.map((item, index) => {
                const obj = { title: item, dataIndex: 'powerTime', width: 200 }
                if (index === 0) {
                    obj.fixed = 'left'
                }
                return obj
            })
            this.json1.push({
                title: '操作',
                slotName: 'action',
                fixed: 'right',
                width: 180,
            })
        },
        async beforeSubmit() {
            await this.sleep()
            return true
        },
        closed() {
            console.log('closed')
            this.isShow = false
        },
        openLoading() {
            const loading = this.$klLoading({
                msg: '555',
            })
            setTimeout(() => {
                loading.close()
            }, 5000)
        },
        async init() {
            if (typeof PIXI === 'undefined') {
                await this.sleep()
                this.init()
                return
            }
            // 创建一个应用实例
            let app = new PIXI.Application({
                width: 256, // default: 800 宽度
                height: 256, // default: 600 高度
                antialias: true, // default: false 反锯齿
                transparent: false, // default: false 透明度
                resolution: 1, // default: 1 分辨率
                forceCanvas: false, // default: false 默认webgl
            })
            // 设置应用的背景色
            app.renderer.backgroundColor = 0x369258

            // 设置应用的自动调整大小
            app.renderer.autoResize = true

            // 再次设置应用的尺寸
            app.renderer.resize(512, 512)

            //
            const imgUrl =
                'http://47.108.195.190:5000/netdist/b55dba33e5c476a1d751ca7c4a41a369-1709302423536~1~.jpg'

            // add 加载图片
            try {
                PIXI.loader.add(imgUrl).on('progress', loadProgressHandler).load(setup)
            } catch (e) {
                console.log('err', e)
            }

            function loadProgressHandler(loader, resource) {
                console.log('loading: ' + resource.url)
                console.log('progress: ' + loader.progress + '%')
            }

            // 在图片加载完成后触发
            function setup() {
                // resources 是一个资源管理器
                // texture 创建了一个纹理对象
                // Sprite 是一个精灵对象
                let cat = new PIXI.Sprite(PIXI.loader.resources[imgUrl].texture)

                // 向舞台中添加精灵
                app.stage.addChild(cat)

                // 删除一个精灵
                // app.stage.removeChild(cat)
                // cat.visible = false;
            }
            // 将应用的view添加到页面中
            this.$refs.pageRef.appendChild(app.view)
            this.app = app
        },
    },
}
</script>

<style lang="scss" scoped>
.pre-class{
    max-height: 300px;
    overflow-y: auto;
    max-width: 500px
}
</style>
